<template>
  <div class="list-container">
    <vue-seamless-scroll
      :data="displayedItems"
      class="scroll"
      :class-option="defaultOption"
    >
      <div
        class="list-item"
        v-for="(item, index) in displayedItems"
        :key="startIndex + index"
        :style="{ height: '.' + itemHeight + 'rem' }"
      >
        <!-- 渲染每一项的内容 -->
        <div>
          <span class="item-sl">
            {{ item.waiguamc }}
            <i>{{ $util.getguajiazt(item.guajiazt) }}</i>
          </span>
          <!-- <span class="item-text">去处理</span> -->
        </div>
        <div>
          <span class="item-mc">{{ item.huoweibh }}</span>
          <span class="item-sj">下次检修时间 : {{ item.xiacijxrq }}</span>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>
<script>
  import '@/assets/font/font.css'
  import { mapGetters, mapActions } from 'vuex'
  export default {
    props: {
      // 列表每一项数据的固定高度
      itemHeight: {
        type: Number,
        required: true,
      },
      // 列表展示的数据源
      items: {
        type: Array,
        required: true,
      },
      // 可视区域的高度
      viewHeight: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        // 当前可视区域首位元素的索引
        startIndex: 0,
        // 当前可视区域末尾元素的索引
        endIndex: 0,
        // 实际渲染的数据
        displayedItems: [],
      }
    },
    mounted() {
      this.updateVisibleData()
      window.addEventListener('scroll', this.updateVisibleData)
    },
    computed: {
      defaultOption() {
        //vue-seamless-scroll参数配置
        return {
          step: 0.6, // 数值越大速度滚动越快
          limitMoveNum: 5, // 开始无缝滚动的数据量
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        }
      },
    },
    watch: {
      items() {
        this.startIndex = 0
        this.endIndex = 0
        this.updateVisibleData()
      },
    },
    methods: {
      ...mapActions({
        openSideBar: 'settings/openSideBar',
        foldSideBar: 'settings/foldSideBar',
        changeShowIndex: 'settings/changeShowIndex',
      }),
      // 计算当前可视区域的起始索引和结束索引
      updateVisibleData() {
        const scrollTop = window.scrollY
        const visibleHeight = this.viewHeight + scrollTop
        const startIndex = Math.floor(scrollTop / this.itemHeight)
        const endIndex = Math.ceil(visibleHeight / this.itemHeight)

        if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
          this.startIndex = startIndex
          this.endIndex = endIndex
          this.displayedItems = this.items.slice(startIndex, endIndex)
        }
      },
      goChuku() {
        this.LTkopenSideBar()
        this.changeShowIndex(0)
        this.$router.push('/exWarehouse/page1')
      },
      LTkopenSideBar() {
        this.openSideBar()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .list-container {
    height: 100%;
    overflow-y: auto;

    .list-item {
      padding: 0.08rem 0.05rem 0.08rem 0.2rem;
      box-sizing: border-box;
      background: linear-gradient(
        90deg,
        rgba(27, 80, 149, 0.59),
        rgb(0, 37, 85) 100%
      );
      color: #fff;
      font-size: 0.16rem;
      line-height: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 0.1rem;

      div {
        display: flex;
        justify-content: space-between;
      }

      .item-sl {
        font-size: 0.2rem;
        // font-family: 'ShangShouGuoDongTi';

        i {
          font-size: 0.14rem;
          color: rgba($color: #fff, $alpha: 0.6);
          font-family: 'none';
        }
      }

      .item-mc {
      }

      .item-sj {
        color: rgba($color: #fff, $alpha: 0.6);
      }

      .item-text {
        display: inline-block;
        margin: auto 0;
        height: 0.18rem;
        line-height: 0.18rem;
        background: rgb(14, 76, 156);
        padding: 0.04rem;
      }

      .item-text:hover {
        cursor: pointer;
      }
    }
  }
</style>
